<template>
    <el-form  label-width="120px">
        <el-form-item label="默认值："> 
            <el-input placeholder="请输入默认值" v-model="item.value" style="width:430px"></el-input>  
        </el-form-item>  
        <el-form-item label="描述："> 
            <el-input placeholder="请输入描述" v-model="item.placeholder" style="width:430px"></el-input>  
        </el-form-item>  
        <el-form-item  label="是否只读："> 
         <el-radio v-model="item.ui.disabled" :label="true">是</el-radio>
         <el-radio v-model="item.ui.disabled" :label="false">否</el-radio> 
        </el-form-item>
        <el-form-item  label="是否禁用："> 
         <el-radio v-model="item.ui.readonly" :label="true">是</el-radio>
         <el-radio v-model="item.ui.readonly" :label="false">否</el-radio> 
        </el-form-item>
         <el-form-item  label="文本框类型"> 
            <el-select v-model="item.ui.widgetConfig.type" placeholder="请选择">
            <el-option v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"/> 
            </el-select>
        </el-form-item> 
        <el-form-item label="前置标签："> 
            <el-input placeholder="请输入前置标签" v-model="item.ui.widgetConfig.compound.prependLabel" style="width:430px"></el-input>  
        </el-form-item> 
        <el-form-item label="后置标签"> 
            <el-input placeholder="请输入后置标签" v-model="item.ui.widgetConfig.compound.appendLabel" style="width:430px"></el-input>  
        </el-form-item> 
        <el-form-item  label="是否可为空"> 
         <el-radio v-model="item.rules.required.value" :label="true">是</el-radio>
         <el-radio v-model="item.rules.required.value" :label="false">否</el-radio> 
        </el-form-item>
         <el-form-item  label="为空提示语"> 
           <el-input v-model="item.rules.required.errMsg" style="width:430px"></el-input>   
        </el-form-item>
        <el-form-item  label="正则内容"> 
           <el-input v-model="item.rules.pattern.value" style="width:430px"></el-input>   
        </el-form-item>
        <el-form-item  label="正则提示语"> 
           <el-input v-model="item.rules.pattern.errMsg" style="width:430px"></el-input>   
        </el-form-item> 
         <el-form-item> 
            <el-button @click="handerClick">关闭</el-button>
        </el-form-item> 
    </el-form>
</template>

<script>
export default {
  props: ["item"],
  name: "inputItem",
  data() {
    return {
      options: [
        {
          value: "text",
          label: "文本"
        },
        {
          value: "number",
          label: "数字"
        },
        {
          value: "password",
          label: "密码"
        }
      ]
    };
  },
  methods: {
    handerClick: function() {
      this.$emit("hclick");
    }
  }
};
</script>

